'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');

var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends6 = require('babel-runtime/helpers/extends');

var _extends7 = _interopRequireDefault(_extends6);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _collapse = require('antd/lib/collapse');

var _collapse2 = _interopRequireDefault(_collapse);

var _row = require('antd/lib/row');

var _row2 = _interopRequireDefault(_row);

var _col = require('antd/lib/col');

var _col2 = _interopRequireDefault(_col);

var _radio = require('antd/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _switch = require('antd/lib/switch');

var _switch2 = _interopRequireDefault(_switch);

var _tooltip = require('antd/lib/tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _QuestionCircleOutlined = require('@ant-design/icons/QuestionCircleOutlined');

var _QuestionCircleOutlined2 = _interopRequireDefault(_QuestionCircleOutlined);

var _reactLifecyclesCompat = require('react-lifecycles-compat');

var _Icon = require('./common/Icon');

var _Icon2 = _interopRequireDefault(_Icon);

var _AutoComplete = require('./common/AutoComplete');

var _AutoComplete2 = _interopRequireDefault(_AutoComplete);

var _Color = require('./common/Color');

var _Color2 = _interopRequireDefault(_Color);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

var Panel = _collapse2['default'].Panel;

var RadioButton = _radio2['default'].Button;
var RadioGroup = _radio2['default'].Group;

var EditorShadow = function (_Component) {
    (0, _inherits3['default'])(EditorShadow, _Component);
    (0, _createClass3['default'])(EditorShadow, null, [{
        key: 'getDerivedStateFromProps',
        value: function getDerivedStateFromProps(props, _ref) {
            var prevProps = _ref.prevProps;

            var nextState = {
                prevProps: props
            };
            if (prevProps && prevProps.value !== props.value) {
                var boxShadow = props.value.boxShadow !== 'none' && !!Object.keys(props.value.boxShadow).length;
                var textShadow = props.value.textShadow !== 'none' && !!Object.keys(props.value.textShadow).length;
                nextState.open = {
                    boxShadow: boxShadow,
                    textShadow: textShadow
                };
            }
            return nextState;
        }
    }]);

    function EditorShadow(props) {
        (0, _classCallCheck3['default'])(this, EditorShadow);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (EditorShadow.__proto__ || Object.getPrototypeOf(EditorShadow)).call(this, props));

        _this.onChange = function (key, v, isDrag) {
            var keyValue = (0, _extends7['default'])({}, _this.defaultShadow, (0, _defineProperty3['default'])({}, key, v));
            var value = _this.props.value;

            var mValue = (0, _extends7['default'])({}, value);
            mValue[_this.state.key][key] = v;
            Object.keys(keyValue).forEach(function ($key) {
                if (!mValue[_this.state.key][$key]) {
                    mValue[_this.state.key][$key] = keyValue[$key];
                }
            });
            _this.props.onChange('shadow', mValue, isDrag);
            _this.setState({
                open: (0, _extends7['default'])({}, _this.state.open, (0, _defineProperty3['default'])({}, _this.state.key, true))
            });
        };

        _this.getTabs = function () {
            return _react2['default'].createElement(
                RadioGroup,
                { value: _this.state.key, onChange: _this.radioChange, size: 'small' },
                Object.keys(_this.props.locale.tags).map(function (key) {
                    return _react2['default'].createElement(
                        RadioButton,
                        { value: key, key: key, className: 'ant-radio-button-auto-width' },
                        _this.props.locale.tags[key]
                    );
                })
            );
        };

        _this.openChange = function (e) {
            var _this$state = _this.state,
                open = _this$state.open,
                key = _this$state.key;

            var value = (0, _extends7['default'])({}, _this.props.value, (0, _defineProperty3['default'])({}, key, e ? (0, _extends7['default'])({}, _this.defaultShadow) : 'none'));
            _this.props.onChange('shadow', value);
            _this.setState({
                open: (0, _extends7['default'])({}, open, (0, _defineProperty3['default'])({}, key, e))
            });
        };

        _this.radioChange = function (e) {
            _this.setState({
                key: e.target.value
            });
        };

        _this.defaultShadow = {
            x: '5px',
            y: '5px',
            blur: '5px',
            color: 'rgba(0,0,0,0.35)'
        };
        _this.state = {
            key: 'boxShadow',
            open: {
                boxShadow: !!Object.keys(props.value.boxShadow).length,
                textShadow: !!Object.keys(props.value.textShadow).length
            }
        };
        return _this;
    }

    (0, _createClass3['default'])(EditorShadow, [{
        key: 'render',
        value: function render() {
            var _this2 = this;

            var _props = this.props,
                value = _props.value,
                locale = _props.locale,
                onChange = _props.onChange,
                props = (0, _objectWithoutProperties3['default'])(_props, ['value', 'locale', 'onChange']);
            var _state = this.state,
                key = _state.key,
                open = _state.open;

            return _react2['default'].createElement(
                Panel,
                (0, _extends7['default'])({}, props, { header: props.header || locale.header }),
                this.getTabs(),
                _react2['default'].createElement(
                    'div',
                    { key: key, style: { marginTop: 10 } },
                    _react2['default'].createElement(
                        _row2['default'],
                        { gutter: 8 },
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 6 },
                            locale['switch']
                        ),
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 6 },
                            _react2['default'].createElement(_switch2['default'], { size: 'small', checked: open[key], onChange: this.openChange })
                        ),
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 6 },
                            locale.inner
                        ),
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 6 },
                            _react2['default'].createElement(_switch2['default'], {
                                size: 'small',
                                checked: open[key] ? !!value[key].inset : false,
                                onChange: function onChange(e) {
                                    _this2.onChange('inset', e ? 'inset' : null);
                                }
                            })
                        )
                    ),
                    _react2['default'].createElement(
                        _row2['default'],
                        { gutter: 8 },
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 3 },
                            _react2['default'].createElement(_Icon2['default'], { type: 'offset', prompt: locale.offset })
                        ),
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 9 },
                            _react2['default'].createElement(_AutoComplete2['default'], {
                                style: { width: '100%' },
                                placeholder: 'offset x',
                                value: open[key] ? value[key].x : '',
                                onChange: function onChange(e) {
                                    _this2.onChange('x', e);
                                }
                            })
                        ),
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 9 },
                            _react2['default'].createElement(_AutoComplete2['default'], {
                                style: { width: '100%' },
                                placeholder: 'offset y',
                                value: open[key] ? value[key].y : '',
                                onChange: function onChange(e) {
                                    _this2.onChange('y', e);
                                }
                            })
                        ),
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 3 },
                            _react2['default'].createElement(
                                _tooltip2['default'],
                                { placement: 'topRight', arrowPointAtCenter: true, title: locale.offset_help },
                                _react2['default'].createElement(_QuestionCircleOutlined2['default'], null)
                            )
                        )
                    ),
                    _react2['default'].createElement(
                        _row2['default'],
                        { gutter: 8 },
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 3 },
                            _react2['default'].createElement(_Icon2['default'], { type: 'blur', prompt: locale.blur })
                        ),
                        _react2['default'].createElement(
                            _col2['default'],
                            { span: 9 },
                            _react2['default'].createElement(_AutoComplete2['default'], {
                                style: { width: '100%' },
                                placeholder: 'blur',
                                value: open[key] ? value[key].blur : '',
                                onChange: function onChange(e) {
                                    _this2.onChange('blur', e);
                                }
                            })
                        ),
                        this.state.key === 'boxShadow' && [_react2['default'].createElement(
                            _col2['default'],
                            { span: 3, key: 'spread-icon' },
                            _react2['default'].createElement(_Icon2['default'], { type: 'spread', prompt: locale.spread })
                        ), _react2['default'].createElement(
                            _col2['default'],
                            { span: 9, key: '1' },
                            _react2['default'].createElement(_AutoComplete2['default'], {
                                style: { width: '100%' },
                                placeholder: 'spread',
                                value: open[key] ? value[key].spread : '',
                                onChange: function onChange(e) {
                                    _this2.onChange('spread', e);
                                }
                            })
                        )]
                    ),
                    _react2['default'].createElement(_Color2['default'], {
                        color: open[key] ? value[key].color : '',
                        onChange: function onChange(e, isDrag) {
                            _this2.onChange('color', e, isDrag);
                        },
                        title: _react2['default'].createElement(_Icon2['default'], { type: 'bg-colors', prompt: locale.color })
                    })
                )
            );
        }
    }]);
    return EditorShadow;
}(_react.Component);

EditorShadow.propTypes = {
    value: _propTypes2['default'].object,
    onChange: _propTypes2['default'].func,
    header: _propTypes2['default'].string,
    locale: _propTypes2['default'].object
};
EditorShadow.defaultProps = {
    value: {
        boxShadow: {},
        textShadow: {}
    },
    onChange: function onChange() {}
};


EditorShadow.componentName = 'EditorShadow';

exports['default'] = (0, _reactLifecyclesCompat.polyfill)(EditorShadow);
module.exports = exports['default'];